<script setup lang="ts">
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
// import * as turf from '@turf/turf'
import { ref, Ref, onMounted, computed } from 'vue';
// import type { EMode } from './utils/draw';
import { Draw, EMode } from './utils/draw'

let map: any = null

interface EditorOptions {
  color: string,
  style?: 'circle' | 'line' | 'fill',
  type?: 'point' | 'line' | 'polygon',
  feature?: string
}

const initMapFn = (): void => {
  mapboxgl.accessToken =
    'pk.eyJ1Ijoic2FnaXQtemgiLCJhIjoiY2t0bnl5dDFnMDZ0aTJwcDNsa3N4emF1biJ9.jFO8rJJN-kvaz9vuQ0odKQ'
  const mapOptions = {
    container: 'map',
    center: [113.3111, 23.0857],
    zoom: 7,
    // style: 'mapbox://styles/mapbox/streets-v11',
    hash: true,
    style: {
      "version": 8,
      "name": "Mapbox Streets",
      // "sprite": "mapbox://sprites/mapbox/streets-v8",
      // "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
      "sources": {},
      "layers": []
    }
  }
  map = new mapboxgl.Map(mapOptions)
}

let draw: Draw

const initDrawFn = (): Draw => (draw = new Draw(map))

const testpolygon = {
  'type': 'FeatureCollection',
  "features": [{
    "type": "Feature",
    "layout": { 'text': '标记', },
    "properties": {
      // 'text': '标记',
      'fill-color': '#ff0000',
      'fill-opacity': 0.3,
      // 'fill-outline-color': '#11aa00',
      // 'fill-outline-width': 5,
      // 'fill-outline-opacity': 1,
      // 'edit_fill_color': '#f0f',//编辑态填充色
      // 'edit_line_color': '#f0f',//编辑态线颜色
      // 'edit_circle_color': '#f0f',//编辑态圆点颜色
    },
    "geometry": {
      "type": "Polygon",
      'coordinates': [[
        [113.323058, 23.109211],
        [113.319291, 23.112136],
        [113.315215, 23.112718],
        [113.315237, 23.133489],
      ]]
    }
  }]
}

const handleGetAll = (): void => {
  const res = draw.getAll()
  console.log(res)
}

const handleClearAll = (): void => draw.clearFeatureCollection()

const handleDelFeature = (id: string) => draw.delFeatureById(id)

const handleGetFeature = (id: string): void => {
  const res = draw.getFeatureById(id)
  console.log(res)
}

const handleStartDrawPoint = (): string => draw.startDraw(EMode.DRAW_POINT)

const handleStartDrawPolygon = (): string => draw.startDraw(EMode.DRAW_POLYGON)

const handleStartDrawLine = (): string => draw.startDraw(EMode.DRAW_POLYLINE)

const handleStartDrawRect = (): string => draw.startDraw(EMode.DRAW_RECT)

const handleStartDrawCircle = (): string => draw.startDraw(EMode.DRAW_CIRCLE)

const handleEndDraw = () => draw.endDraw()

const deleteMode = () => draw.deleteMode()

// const mode = computed(() => draw.currentMode || EMode.STATIC)

onMounted(() => initMapFn())
onMounted(() => initDrawFn())
onMounted(() => {
  // draw.setFeatureCollection(<any>testpolygon)
  // draw.on('before', () => console.log('success'))
})


</script>

<template>
  <div id="map"></div>
  <div class="btn">
    <button @click="handleGetAll()">获取全部 Feature</button>
    <button @click="handleClearAll()">清空所有 Feature</button>
    <button @click="handleGetFeature('test')">根据 id 获取 Feature</button>
    <button @click="handleDelFeature('test')">根据 id 删除 Feature</button>

    <br />
    <button @click="handleStartDrawPoint()">绘制 point</button>
    <button @click="handleStartDrawPolygon()">绘制 polygon</button>
    <button @click="handleStartDrawLine()">绘制 line</button>
    <button @click="handleStartDrawRect()">绘制 矩形</button>
    <button @click="handleStartDrawCircle()">绘制 圆</button>
    <br />
    <button @click="handleEndDraw()">退出绘制</button>
    <button @click="deleteMode()">删除模式</button>
    <button>编辑模式</button>
  </div>
</template>

<style>
#map {
  width: 1000px;
  height: 500px;
  border: 1px solid tomato;
}

.btn {
  width: 500px;
  /* display: flex; */
  /* justify-content: space-between; */
  /* align-items: center; */
}
</style>
